<template>
  <div class="saveUpdate">
    <el-dialog :title="DetailInfo.id?'编辑渠道号':'新增渠道号'" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showUpdate="showUpdate" width="600px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
        <dialog-wrapper>
          <div v-if="DetailInfo.id">
            <el-form-item label="渠道号:" prop="name" :rules="[{ required: true, message: '名称不能为空'}]">
              <el-input v-model="DetailInfo.name" disabled ></el-input>
            </el-form-item>
            <el-form-item label="关联组员:">
              <el-select v-model="DetailInfo.superior"  placeholder="请选择">
                <el-option v-for="item in stafflist" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="同步新增IOS:">
              <el-switch
                style="display: block"
                v-model="DetailInfo.only_android"
                active-color="#ff4949"
                inactive-color="#13ce66"
                active-text="否"
                inactive-text="是">
              </el-switch>
            </el-form-item>
            <div v-for="(chn, index) in DetailInfo.names" :key="index">
              <el-form-item :label="'渠道号' + parseInt(index+1)" :prop="'names.' + index + '.value'" :rules="[{ required: true, message: '名称不能为空'}]">
                <el-input v-model.trim="chn.value">
                  <template slot="append"><el-button v-if="index" type="danger" icon="el-icon-delete" @click="removechn(chn)"></el-button></template>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item><el-button type="primary" @click="addchn">点击新增渠道号</el-button></el-form-item>
          </div>
          <el-form-item label="备注:" prop="description">
            <el-input v-model="DetailInfo.description" type="textarea" :rows="2" ></el-input>
          </el-form-item>
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
        <el-button v-if="DetailInfo.id" type="primary" :loading="loading" @click="updateDetail" size="small">确 定</el-button>
        <el-button v-else type="primary" :loading="loading" @click="saveDetail" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import { updatechn, saveAddchn } from '@/api'
  export default {
    components: { DialogWrapper },
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        DetailInfo: this.Detail,
        accountType: this.$store.state.app.accountType,
        showParent: false,
        saveAddchnFlag: true,
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      Detail: {
        type: Object
      },
      stafflist: {
        type: Array
      },
      show_id: {
        type: Number
      }
    },
    created(){
      if(!this.Detail.id){
        this.DetailInfo.superior = this.show_id
      }else{
        this.stafflist.find(item=>{
          if(item.name=== this.DetailInfo.superior)
            this.DetailInfo.superior=item.id;
        })
      }

      console.log(this.DetailInfo)
    },
    methods: {
      removechn(item){
        var index = this.DetailInfo.names.indexOf(item)
        if (index !== -1) {
          this.DetailInfo.names.splice(index, 1)
        }
      },
      addchn(){
        if(this.DetailInfo.names.length > 9){
          this.$message.warning('最多可添加十个，已达上限')
          return
        }
        this.DetailInfo.names.push({value: '',
          key: Date.now()})
      },
      saveDetail(){
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            let chnArray = []
            this.DetailInfo.names.map(item => {
              chnArray.push(item.value)
            })
            let date = Object.assign({},this.DetailInfo,{names: chnArray})
            let sChnArray = chnArray.sort()
            for(let i=0;i<chnArray.length;i++){
              if (chnArray[i]===sChnArray[i+1]){
                this.saveAddchnFlag = false
              }
            }
          if (this.saveAddchnFlag){
            saveAddchn(date).then(res => {
              if(res.status === 0){
                this.$message({ message: '新增成功。',type: 'success' })
                this.$emit('update:showUpdate', false)
              }
            })
          } else {
            this.$message.error('存在重复的渠道号，请确认！');
            this.saveAddchnFlag = true
          }
          }
        })
      },
      updateDetail(){
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            let {superior, description} = this.DetailInfo
            updatechn({superior, description}, this.Detail.id).then(res => {
              if(res.status === 0){
                this.$message({ message: '编辑成功。',type: 'success' })
                this.$emit('update:showUpdate', false)
              }
            })
          }
        })
      },
    },
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>
